<template>
	<div v-if="Object.keys(workFlowData).length!==0">
		<div class="bnt-out">
			<button type="button" @click="approvalReson('btn1',workFlowData.btn1)" :style="bnt1" v-if="workFlowData.btn1&&workFlowData.btn1!==''">{{workFlowData.btn1}}</button>
			<button type="button" @click="approvalReson('btn2',workFlowData.btn2)" :style="bnt2" v-if="workFlowData.btn2&&workFlowData.btn2!==''">{{workFlowData.btn2}}</button>
			<button type="button" @click="approvalReson('btn3',workFlowData.btn3)" :style="bnt3" v-if="workFlowData.btn3&&workFlowData.btn3!==''">{{workFlowData.btn3}}</button>
			<button type="button" @click="approvalReson('btn4',workFlowData.btn4)" :style="bnt4" v-if="workFlowData.btn4&&workFlowData.btn4!==''">{{workFlowData.btn4}}</button>
			<button type="button" @click="approvalReson('btn5',workFlowData.btn5)" :style="bnt5" v-if="workFlowData.btn5&&workFlowData.btn5!==''">{{workFlowData.btn5}}</button>
			<button type="button" @click="approvalReson('btn6',workFlowData.btn6)" :style="bnt6" v-if="workFlowData.btn6&&workFlowData.btn6!==''">{{workFlowData.btn6}}</button>
			<button type="button" @click="approvalReson('btn7',workFlowData.btn7)" :style="bnt7" v-if="workFlowData.btn7&&workFlowData.btn7!==''">{{workFlowData.btn7}}</button>
			<button type="button" @click="approvalReson('bnt',outObj.dataStatus)" :style="bnt2" v-if="outObj.dataStatus === '草稿' || outObj.dataStatus === '已撤销'">修改</button>
		</div>
		<div class="seat"></div>
	</div>
</template>

<script>
	import {
		getField
	} from '@request/api.js'
	export default{
		data(){
			return{
				allColor:{}
			}
		},
		props:['workFlowData','outObj'],
		methods:{
			approvalReson(bnt,text){
				// this.$emit('approvalReson')
				if(bnt === 'bnt'){
					let type
					if(text !== '草稿'){
						type = "esc"
					}else{
						type = ""
					}
					this.$router.push({
						path:'/details',
						query:{
							form_id:this.$route.query.fromId,
							num:this.$route.query.num,
							title:this.outObj.form_simple_title,
							type
						}
					})
				}else{
					this.$router.push({
						path:'/approvalInput',
						query:{
							'form_id':this.$route.query.fromId,
							'num':this.$route.query.num,
							'text':text,
							'bnt':bnt,
							'status':this.$route.query.status,
							'currentTime':this.outObj.currentTime
						}
					})
				}													
			}
		},
		created() {
			this.allColor = this.$store.state.allColor
		},
		watch:{
			storeColor:function(val){
				this.allColor = val
			}
		},
		computed:{
			storeColor(){
				return this.$store.state.allColor
			},
			bnt1(){
				return {'background-color':this.allColor.btn1_bg_color,'color':this.allColor.btn1_text_color}
			},
			bnt2(){
				return {'background-color':this.allColor.btn2_bg_color,'color':this.allColor.btn2_text_color}
			},
			bnt3(){
				return {'background-color':this.allColor.btn3_bg_color,'color':this.allColor.btn3_text_color}
			},
			bnt4(){
				return {'background-color':this.allColor.btn4_bg_color,'color':this.allColor.btn4_text_color}
			},
			bnt5(){
				return {'background-color':this.allColor.btn5_bg_color,'color':this.allColor.btn5_text_color}
			},
			bnt6(){
				return {'background-color':this.allColor.btn6_bg_color,'color':this.allColor.btn6_text_color}
			},
			bnt7(){
				return {'background-color':this.allColor.cancel_bg_color,'color':this.allColor.cancel_icon_color}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bnt-out{
		display: flex;
		flex-direction:row-reverse;
		flex-wrap:wrap;
		align-items:center;
		position: fixed;
		bottom: 0;
		left: 0;
		// height: vw(60);
		width: 100vw;
		background-color: $bg-1;
		z-index: 3;
		color: #8A8A8A;
	}
	.bnt-out button{
		padding: vw(5) vw(32);
		font-size: vw(14);
		border: none;
		outline: none;
		margin-right: 16px;
		margin-top: vw(15);
		margin-bottom: vw(15);
	}
	.seat{
		height: vw(60);
		width: 100vw;
		background-color: #FFFFFF;
	}
</style>
